<template>
	<view>
		<view class="view">
			<view><input type="text" value="" v-model="name" placeholder="请输入持卡人"
					style="height: 80rpx;margin-left: 20rpx;width: 600rpx;" /></view>
			<view><input type="text" value="" v-model="city" placeholder="请输入银行"
					style="height: 80rpx;margin-left: 20rpx;width: 600rpx;" /></view>
			<view><input type="number" value="" v-model="card" placeholder="请输入银行卡号"
					style="height: 80rpx;margin-left: 20rpx;width: 600rpx;" /></view>
			<u-button type="primary" style="margin-top: 40rpx;" @click="cord">确认绑定</u-button>
		</view>
		<view class="txt">一经绑定，不可修改</view>
	</view>
</template>

<script>
	import * as api from '@/api/api.js'
	export default {
		data() {
			return {
				name: "",
				city: '',
				card: ""
			}
		},
		methods: {
			cord(){
				if(this.name == ''){
					uni.showToast({
						title: "持卡人不可为空",
						icon: "none"
					})
				}else if(this.city == ''){
					uni.showToast({
						title: "银行名不可为空",
						icon: "none"
					})
					
				}else if(this.card == ''){
					uni.showToast({
						title: "银行卡号不可为空",
						icon: "none"
					})
					
				}else{
					
				}
			}
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		background-color: #242329;
	}

	.view {
		width: 90%;
		margin: 0 auto;
	}

	.view>view {
		margin-top: 20rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		height: 80rpx;
	}

	.txt {
		text-align: center;
		width: 90%;
		margin: 0 auto;
		color: #feb242;
	}
</style>
